<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>条件渲染指令</title>
</head>
<body>

<div id="app">
    <p v-if="status===1">当status为1时显示该行</p>
    <p v-else-if="status===2">当status为2时显示该行</p>
    <p v-else>否则显示该行</p>
</div>

<div id="app1">
    <template v-if="status===1">
        <p>这是一段文本</p>
        <p>这是一段文本</p>
        <p>这是一段文本</p>
    </template>
</div>

<p>input元素被复用</p>

<div id="app2">
    <template v-if="type==='name'">
        <label>用户名称：</label>
        <input type="text" placeholder="请输入用户名称">
    </template>

    <template v-else>
        <label>邮箱地址：</label>
        <input type="text" placeholder="请输入邮箱地址">
    </template>
    <button type="button" @click="handToggleClick">切换输入类型</button>
</div>
<hr/>
<p>input元素被禁止复用</p>

<div id="app3">
    <template v-if="type==='name'">
        <label>用户名称：</label>
        <input type="text" placeholder="请输入用户名称" key="name-input">
    </template>

    <template v-else>
        <label>邮箱地址：</label>
        <input type="text" placeholder="请输入邮箱地址" key="email-input">
    </template>
    <button type="button" @click="handToggleClick">切换输入类型</button>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * v-if、v-else-if、v-else
     *
     * 如果一次判断的是多个元素，可以在Vue.js内置的<template>元素上使用条件指令，但最终渲染的结果不会包含该元素。
     * **/

    var app = new Vue({
        el: "#app",
        data: {
            status: 1,
        },
    });

    var app1 = new Vue({
        el: "#app1",
        data: {
            status: 1,
        },
    });

    /**
     * Vue在渲染元素时，出于效率考虑会尽可能的复用已有的元素而非重新渲染（比如这里的input元素）
     * **/
    var app2 = new Vue({
        el:"#app2",
        data:{
            type:'name',
        },
        methods:{
            handToggleClick:function () {
                this.type=  this.type==='name'? 'email':'name';
            }
        }
    });

    /**
     *  可以发现输入内容后，点击切换按钮，尽管DOM发生了变化，但是在之前输入框内输入的信息并没有发生变化，
     *  只是替换了placeholder内容，说明<input>元素被复用了。
     *
     *  如果你不希望这么做，可以使用Vue.js提供的key属性，它可以让你决定是否需要复用元素，注意Key的值必须是唯一的。
     *
     *  给两个<input>元素都增加key后，就不会复用了，在切换类型输入的内容也会被删除，不过<label>元素依然是被复用的，因为没有添加key属性。
     */

        var app3 = new Vue({
        el:"#app3",
        data:{
            type:'name',
        },
        methods:{
            handToggleClick:function () {
                this.type=  this.type==='name'? 'email':'name';
            }
        }
    });


</script>
</body>
</html>